﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery拖动放入购物车代码 - A5源码</title>

<script src="js/jquery-1.9.1.min.js"></script>
<style>
	*{padding:0px;margin:0px}
	table,thead{width: 100%;}
	tr th{width:25%;height:30px;background-color: #23B7E5;font-size: 16px;padding: 2px 0px;color:#fff;}
	tr td{text-align: center;padding: 5px 0px;background-color: #fff;font-size: 14px;}
	tr td a{padding: 2px 5px;border:1px solid #ddd;cursor: pointer;}
	ul li{list-style-type: none;overflow: hidden;}
	#div1{width:350px;height:100%;border:1px solid #ddd;position:fixed;right:0px;top:0px;
		background-color: #F5F5F5;
	}
	#div1 ul li p{50%;text-align: right;flex: 1;}
	#div2 ul{overflow: hidden;}
	#div2 ul li{float: left;width:150px;height:120px;border:1px solid #ddd;margin-right: 10px;}
	#div2 ul li img{width: 100%;height: 100%;}
	.div_panel{min-height: 200px;}
	.allMoney{position: absolute;right: 0px;}
</style>

</head>
<body>
拖拽到右侧
<div id="div2">
	<ul>
		<li>
			<img id="img1" src="img/car1.jpg" draggable="true" ondragstart="drag(this)" />
			<input type="hidden" id="inp_money" value="23">
			<input type="hidden" id="inp_name" value="耐克3.0" />
		</li>
		<li>
			<img id="img1" src="img/car2.jpg" draggable="true" ondragstart="drag(this)" />
			<input type="hidden" id="inp_money" value="100">
			<input type="hidden" id="inp_name" value="奥迪" />
		</li>
		<li>
			<img id="img1" src="img/car3.jpg" draggable="true" ondragstart="drag(this)" />
			<input type="hidden" id="inp_money" value="1000">
			<input type="hidden" id="inp_name" value="东风特产" />
		</li>
	</ul>
</div>
<div id="div1" ondrop="drop()" ondragover="allowDrop(event)">
	<div class="div_panel">
		<table border="0" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th>名称</th>
					<th>单价</th>
					<th>数量</th>
					<th>价格</th>
				</tr>
			</thead>
			<tbody id="ul_panel"></tbody>
		</table>
	</div>
	<p class="allMoney">总价:<span id="totalMoney">0</span></p>
</div>

<script>
	var money=0;
	var name="";
	var data=[];
	function allowDrop(e){
		e.preventDefault();
	}
	function drag(t){
		money=$(t).siblings("#inp_money").val();
		name=$(t).siblings("#inp_name").val();
		/*var num=1;
		add(name,money,num);*/
	}
	function addJson(name,money){
		for(var j=0;j<data.length;j++){
			if(data[j].name==name){
				data[j].num++;
				return;
			}
		}
		data.push({
			money:money,
			name:name,
			num:1
		});
	}
	function addHtml(){
		var text_html='';
		var totalMoney=0;
		$("#ul_panel").html("");
		for(var i=0;i<data.length;i++){
			text_html+='<tr><td>'+data[i].name+'</td><td>'+data[i].money+'</td><td><a onclick="reduce(\'\'+'+i+',this)">-</a> '+data[i].num+' ';
			text_html+='<a onclick="addNum(\'\'+'+i+',this)">+</a></td><td>￥'+(data[i].money*data[i].num)+'</td></tr>';
			totalMoney+=data[i].money*data[i].num;
			$("#totalMoney").text(totalMoney);
		}
		$("#ul_panel").append(text_html);
	}
	function drop(){
		addJson(name,money);
		addHtml();
	}
	function reduce(a,t){
		data[a].num--;
		if(data[a].num==0){
			data.splice(a,1);
		}
		if(data.length==0){
			$("#totalMoney").text(0);
		}
		addHtml();
	}
	function addNum(a,t){
		data[a].num++;
		addHtml();
	}
	
</script>

<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://down.admin5.com/" target="_blank">A5源码</a></p>
</div>
</body>
</html>